<template>
  <div class="audio-list-page">
    <header>
      <ul class="sort-list">
        <li v-for="sortType in sortTypeList"
            v-html="sortType.title"
            @click="activeSort = sortType.id"
            :class="{ 'active' :  activeSort == sortType.id}"
            :key="sortType.id">
        </li>
      </ul>
    </header>

    <div class="no-mode-translate-demo-wrapper">
      <transition name="no-mode-translate-fade">
        <ul v-bind:key="activeSort"
            class="audio-list-container">

          <li class="audio-list-wrapper"
              v-for="(value, name) in listData[activeSort]"
              :key="name"
              @click="toggle(name)">
            <p class="title">
              <span class="text"><span class="date">{{name}}</span> <span class="time">{{ }}</span></span>
              <span :class="[{ open: openMeuns.findIndex(id => id === name) > -1 }, 'arrow']"></span>
            </p>
            <Collapse>
              <ul class="audio-list"
                  v-show="openMeuns.findIndex(id => id === name) > -1">

                <li class="audio"
                    v-for="audio in value"
                    :key="audio.id"
                    @click.stop=go(audio.link)>
                  <div class="img-wrapper">
                    <img :src="audio.cover"
                         alt="">
                  </div>

                  <div class="content">
                    <p class="audio-title-en">{{ audio.book }} </p>
                  </div>

                  <span class="detail"></span>
                </li>
              </ul>
            </Collapse>
          </li>
        </ul>
      </transition>
    </div>
  </div>
</template>

<script>
import Collapse from '@/components/Collapse';
import m from 'moment/min/moment.min';
import { OSS_IMAGE_URL_PREFIX } from '../constances/constances'

const SORT_TYPE_LIST = [{
  id: 'time',
  title: '按时间'
}, {
  id: 'album',
  title: '按专辑',
}]

export default {
  name: 'audioList',
  components: {
    Collapse,
  },
  data () {
    return {
      sortTypeList: SORT_TYPE_LIST, // 分类列表,
      activeSort: SORT_TYPE_LIST[0].id,
      openMeuns: [],
      listData: {
        'time': {},
        'album': {},
      },
      ctype: undefined,
      orgid: undefined,
    }
  },
  computed: {
  },
  methods: {
    go (url) {
      this.$router.push(url)
    },
    toggle (id) {
      const index = this.openMeuns.findIndex(item => id == item)
      if (index > -1) {
        this.openMeuns.splice(index, 1);
      } else {
        this.openMeuns = [
          ...this.openMeuns,
          id,
        ]
      }
    },
    // 异步获取录音数据
    getAudioShareData () {
      const { uid } = this.$route.query
      this.$api.shareRecord.getShareRecord({
        uid,
      }).then(data => {
        // console.log(data.recordingList, m)
        let albumMap = {};
        let timeMap = {};
        if (data.recordingList) {
          data.recordingList.map(record => {
            const time = m(record.date_time).format('YYYY-MM-DD')
            if ((record.cover_image_key == null) || (record.cover_image_key == "")) { record.cover = require("../assets/DefaultCover.png"); }
            else { record.cover = OSS_IMAGE_URL_PREFIX + "/" + record.episode + "/" + record.book + "/" + record.cover_image_key; }

            record.link = "/?uid=" + record.user_id + "&recid=" + record.id + (this.ctype ? `&ctype=${this.ctype}` : '') + (this.orgid ? `&orgid=${this.orgid}` : '')

            if (albumMap[record.episode]) {
              albumMap[record.episode].push(record)
            } else {
              albumMap[record.episode] = [record]
            }

            if (timeMap[time]) {
              timeMap[time].push(record)
            } else {
              timeMap[time] = [record]
            }

            return {
              ...record,
              time
            }
          })

          this.listData = {
            'time': timeMap,
            'album': albumMap,
          }
          // console.log(albumList, timeList)
          // albumList = _.uniq(albumList)
          // timeList = _.uniq(timeList).reverse()
          // console.log(albumList, timeList)
        }
      }).catch(() => {
      })
    },
  },
  created () {
    this.ctype = this.$route.query.ctype
    this.orgid = this.$route.query.orgid
    this.getAudioShareData();
  }
}
</script>

<style lang="scss" src="../scss/audiolist.scss" scoped></style>
<style lang="scss" src="../scss/audiolist-blue.scss" scoped></style>
<style lang="scss" src="../scss/audiolist-green.scss" scoped></style>
